<template>
    <div class="exam-center">
        <h3>考试列表</h3>
        <el-table
            :data="tableData"
            row-key="id"
            style="width: 100%"
            border
        >
            <el-table-column prop="title" label="试卷名"></el-table-column>
            <el-table-column prop="totalTime" label="考试总时间" align="center">
                <template slot-scope="scope">{{ scope.row.totalTime }} 分钟</template>
            </el-table-column>
            <el-table-column label="考试有效时间" header-align="center">
                <el-table-column prop="startDate" width="135" label="开始时间" align="center"></el-table-column>
                <el-table-column prop="endDate" width="135" label="结束时间" align="center"></el-table-column>
            </el-table-column>
            <el-table-column prop="courseName" label="科目" align="center"></el-table-column>
            <el-table-column prop="teacherName" label="出卷教师"  align="center"></el-table-column>
             <el-table-column  label="组卷方式" align="center">
                <template slot-scope="scope">
                    <el-tag
                        :type="scope.row.way === 1 ? 'info' : 'success'"
                    >{{ scope.row.way === 1 ? '固定' : '随机' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-link
                        type="primary"
                        @click="startExamBtnClick(scope.$index, scope.row)"
                        v-loading.fullscreen.lock="fullscreenLoading"
                    >开始考试</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 15,20, 40, 50, 70, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <!-- <h3>为考完</h3> -->
        <!-- <el-table :data="tableData">
            <el-table-column prop="title" label="试卷名称"></el-table-column>
            <el-table-column prop="courseName" label="课程"></el-table-column>
            <el-table-column prop="specialty" label="专业"></el-table-column>
            <el-table-column prop="teacherName" label="出卷教师"></el-table-column>
            <el-table-column label="考试总时间">
            </el-table-column>
        </el-table>-->

        <!-- <ExamRecord/> -->
    </div>
</template>

<style lang="scss" scoped>
.exam-center {
    margin: 0 auto;
    // margin-top: 50px;
    // max-width: 1600px;
    padding: 10px 15px;
    // padding-bottom: 100px;
    h3 {
        margin-bottom: 10px;
    }
    
}
</style>


<script>
import { Promise } from "q";
// import ExamRecord from "./record";

export default {
    // components: { ExamRecord },
    data() {
        return {
            classId: sessionStorage.classId,
            tableData: [],
            fullscreenLoading: false,
            totalPage: 0,
            pageIndex: 1,
            pageSize: 10
        };
    },
    created() {
        this.getPaperList();
    },
    methods: {
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getPaperList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getPaperList();
        },
        getPaperList() {
            
            this.$http("api/paper/list", {
                params: {
                    classId: this.classId,
                    page: this.pageIndex,
                    limit: this.pageSize
                }
            }).then(({ data }) => {
                this.tableData = data.page.list;
                console.log('data', data)
                this.totalPage = data.page.totalCount;
                // console.log("this.tableData", this.tableData);
            });
        },
        startExamBtnClick(index, row) {
            sessionStorage.removeItem("currExamRecordId");
            console.log('row', row)
            sessionStorage.setItem("currExamPaper", JSON.stringify(row));
            this.$router.push({ path: "/exam/exam?paperId=" + row.paperId });
        }
    }
};
</script>


